<template>
  <div class="commandTab">
    <el-table height="100px" v-adaptive :data="commandList">
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="token" label="Token"> </el-table-column>
      <el-table-column prop="description" label="说明"> </el-table-column>
      <el-table-column
        prop="parameters"
        :formatter="parametersNumber"
        label="参数"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 命令详情 -->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="openCommandDteails(scope.row)"
          ></el-button>
          <!-- 编辑命令 -->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit-outline"
            @click="editCommand(scope.row)"
          ></el-button>
          <!-- 删除命令 -->
          <el-button
            v-permission="[16, 'button']"
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="deleteCommand(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 命令详情 -->
    <command-details
      :deviceTypeToken="deviceTypeToken"
      :detailData="detailData"
      @editCommand="editCommand"
      :commandDteails="commandDteails"
      @openDteails="showDteails"
      @detailsOpenDteails="detailsOpenDteails"
    />
    <!-- 编辑命令 -->
    <edit-command
      :openEditCommand="openEditCommand"
      :editCommandDteails="editCommandDteails"
      :deviceTypeToken="deviceTypeToken"
      @getCommandList="getCommandToken"
      @changeShow="showEditCommand"
    />
  </div>
</template>

<script>
import CommandDetails from "./CommandDetails.vue";
import EditCommand from "./EditCommand.vue";
import { deleteDeviceType } from "@/api/deviceType";
export default {
  props: {
    deviceTypeToken: {
      type: String,
      required: true,
    },
    commandList: {
      type: Array,
      default: [],
    },
  },
  components: {
    CommandDetails,
    EditCommand,
  },
  data() {
    return {
      commandsList: [
        {
          name: "",
          token: "",
          description: "",
          parameters: "",
        },
      ],
      commandDteails: false,
      editCommandDteails: false,
      getDeviceTypeToken: this.deviceTypeToken,
      openEditCommand: {},
      detailData: {},
    };
  },
  mounted() {},
  methods: {
    //   获取命令列表
    getCommandToken() {
      this.$emit("updateCommandsList");
    },
    // 打开命令详情弹窗
    openCommandDteails(row) {
      this.detailData = row;
      this.commandDteails = true;
    },
    showDteails(data) {
      if (data === "false") {
        this.commandDteails = false;
      } else {
        this.commandDteails = true;
      }
    },
    // 打开编辑弹窗
    editCommand(row) {
      this.commandDteails = false;
      this.editCommandDteails = true;
      this.openEditCommand = row;
    },
    showEditCommand(data) {
      if (data === "false") {
        this.editCommandDteails = false;
      } else {
        this.editCommandDteails = true;
      }
    },
    // 参数转换显示数量
    parametersNumber(row, index) {
      return row.parameters.length + "项";
    },
    // 删除命令
    deleteCommand(row) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDeviceType(that.deviceTypeToken + "/commands/" + row.token).then(
          (res) => {
            this.$msg({
              type: "success",
              message: "删除成功!",
            });
            that.getCommandToken();
          }
        );
      });
    },
    // 详情弹窗传过来的
    detailsOpenDteails(data) {
      this.editCommandDteails = data;
      this.commandDteails = false;
    },
  },
};
</script>

<style scoped>
.el-pagination {
  margin-left: 0px;
}
</style>